
import { Breadcrumb, Layout, Menu } from 'antd';
import React, { useState } from 'react';
import { Outlet } from 'react-router-dom'

import MainMenu from '../components/MainMenu'

const { Header, Content, Sider } = Layout;


const View: React.FC = () => {
	const [collapsed, setCollapsed] = useState(false);
	
	return (
		<Layout style={{ minHeight: '100vh' }}>

			<Sider collapsible collapsed={collapsed} onCollapse={value => setCollapsed(value)}>
				<div className="logo" />
				<MainMenu></MainMenu>
			</Sider>
			<Layout className="site-layout">
				<Header className="site-layout-background" style={{ padding: '0 0 0 20px' }} >
					
				</Header>
				<Content style={{ margin: '10px 16px' }}>
					<div className="site-layout-background" style={{ padding: 20, minHeight: 360 }}>
						<Outlet></Outlet>
					</div>
				</Content>
			</Layout>
		</Layout>
	);
};

export default View;